<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 功能1：登录并跳转到user_index.html用户主页 -->
    <!-- 功能2：失去焦点事件，用来验证用户名格式是否符合所写正则表达式-->
    <!-- 功能3：失去焦点事件，用来验证密码格式是否符合所写正则表达式 -->
    <link rel="stylesheet" href="./css/cssreset.css">
    <link rel="stylesheet" href="./css/login.css">
    <title>登录</title>
</head>
<body>
    <div class="body">
        <div class="table">
            <ul>
                <li>
                    <span>用户登录</span> 
                    <a href="reg.html">新用户注册</a>
                </li>
                <li>
                    用户名 <input type="text" name="uname" id="uname" value="" onblur="fn()">
                    <h2 type="text" name="uname1" id="uname1" value=""></h2>
                </li>
                <li>
                    密码<input type="password" name="upwd" id="upwd" value="" onblur="fu()">
                    <h3 type="text" name="upwd1" id="upwd1" value=""></h3>
                </li>
                <li><input type="button" name="btn" id="btn" value="登录" onclick="login()"></li>
                <li></li>
                <li></li>
            </ul>     
        </div>
    </div>
    <script>
        function login(){
            //通过DOM获取用户名和密码的值
            var u = document.getElementById('uname').value;
            var p = document.getElementById('upwd').value;
            //创建xhr对象
            var xhr = new XMLHttpRequest();
            //状态改变事件
            xhr.onreadystatechange=function(){
                //判断事件状态码为4 HTTP状态码为200
                if(xhr.status===200 && xhr.readyState===4){
                    //通过DOM获取id=msg的数据
                    // var msg=document.getElementById('msg');
                    // //通过JSON.parse将xhr.responseText接受的数据转换为对象
                    // var obj=JSON.parse(xhr.responseText);
                    // //修改msg的值为obj对象中的msg的值
                    // msg.innerHTML=obj.msg;
                    var obj=JSON.parse(xhr.responseText);
                    console.log(obj);
                    if(obj.code==200){
                        alert('登录成功');
                        //跳转过去时带上查询字符串uid的数据
                        location.href=`user/user_index.html?uid=${obj.data[0].uid}`
                    }else{
                        alert("用户名或密码错误");
                    }
                }  
            }
            //打开接口连接
            var url="http://127.0.0.1:8080/a1/users/login"
            xhr.open('POST',url,true);
            //修改请求头主体(!!遗漏不会报错但接受的所有数据都为undefined)
            xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
            //发送数据至后端接口
            xhr.send(`uname=${u}&upwd=${p}`);
        }
        //失去焦点事件，用来验证用户名格式是否符合所写正则表达式
        function fn(){
            var reg=/^[a-zA-Z0-9]{3,12}$/
            var uname=document.getElementById("uname");
            var uname1=document.getElementById('uname1');
            if(!reg.test(uname.value)){
                uname1.innerHTML="请输入3-12位数字或字母"
            }
        }
        //失去焦点事件，用来验证密码格式是否符合所写正则表达式
        function fu(){
            var reg=/^[a-zA-Z0-9]{3,12}$/
            var upwd=document.getElementById('upwd');
            var upwd1=document.getElementById('upwd1');
            if(!reg.test(upwd.value)){
                upwd1.innerHTML="请输入3-12位数字或字母"
            }
        }
    </script>
</body>
</html>